<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-06-21 16:36:13
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-25 14:21:01
 * @Description:
 *
-->

<template>
  <div class="schedule-strategy-detail">
    <div
      v-for="(item, index) in detail"
      :key="index"
      :class="['item', item.factorsPop ? 'pop' : '']"
    >
      <div :class="['setting', item.factorsPop ? 'popup' : '']">
        <div class="name">{{ item.label }}</div>
        <el-slider
          v-model="item.percent"
          class="slider"
          :disabled="item.disabled"
          :min="0"
          :max="100"
          :step="1"
          show-input
          :format-tooltip="percentageValueFormat"
          @change="percentChange($event, index)"
        />
        <div style="width: 16px; margin-left: 10px">
          <i
            v-if="item.hasFactors && !item.disabled"
            style="font-size: 16px; cursor: pointer"
            :class="item.factorsPop ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            @click="factorsPopClick(index)"
          ></i>
        </div>
      </div>
      <div v-if="item.factorsPop" class="factors">
        <el-checkbox-group
          v-if="item.isCheckbox"
          v-model="item.factors"
          class="checkbox"
        >
          <el-checkbox
            v-for="factor in factorOptions(item.value)"
            :key="factor.value"
            :label="factor.value"
            :disabled="
              item.factors.length === 1 && item.factors[0] === factor.value
            "
          >{{ factor.label }}
            <el-tooltip effect="dark" :content="factor.hint" placement="top">
              <i
                class="el-icon-info"
                style="margin-left: 5px; color: #c3c3c3"
              ></i>
            </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
        <el-radio-group v-if="!item.isCheckbox" v-model="item.factor">
          <el-radio
            v-for="factor in factorOptions(item.value)"
            :key="factor.value"
            :label="factor.value"
          >{{ factor.label }}
            <el-tooltip effect="dark" :content="factor.hint" placement="top">
              <i
                class="el-icon-info"
                style="margin-left: 5px; color: #c3c3c3"
              ></i>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <el-row type="flex" justify="end" style="margin-top: 10px">
      <el-button
        type="primary"
        size="small"
        @click="confirmClick"
      >确 定</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  STRATEGY_LOAD_FACTORS_V2,
  STRATEGY_SLA_FACTORS_V2,
  STRATEGY_PRICE_FACTORS_V2
} from '@/utils/cnap/constant'

export default {
  name: 'ScheduleStrategyDetail',
  components: {},
  props: {
    // 配置
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loadFatctors: STRATEGY_LOAD_FACTORS_V2,
      slaFactors: STRATEGY_SLA_FACTORS_V2,
      priceFactors: STRATEGY_PRICE_FACTORS_V2,
      detail: []
    }
  },
  computed: {},
  created() {
    this.detail = JSON.parse(JSON.stringify(this.options))
  },
  methods: {
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      const sum = this.detail.reduce((pre, cur, index) => {
        return pre + cur.percent
      }, 0)
      if (sum !== 100) {
        this.$message.warning({
          message: '各调度策略百分比之和需为100%',
          duration: 1500
        })
        return
      }
      this.$emit('confirm', this.detail)
    },
    /**
     * @description: 期望值格式化
     * @param {*} val
     * @return {*}
     */
    percentageValueFormat(val) {
      return val + '%'
    },
    /**
     * @description: 调度因子
     * @param {*} val
     * @return {*}
     */
    factorOptions(val) {
      return val === 'load'
        ? this.loadFatctors
        : val === 'sla'
          ? this.slaFactors
          : this.priceFactors
    },
    /**
     * @description: 展示详细因子
     * @param {*} index
     * @return {*}
     */
    factorsPopClick(index) {
      this.$set(
        this.detail[index],
        'factorsPop',
        !this.detail[index].factorsPop
      )
    },
    /**
     * @description: 百分比变化
     * @param {*} val
     * @param {*} index
     * @return {*}
     */
    percentChange(val, index) {}
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.schedule-strategy-detail {
  width: 100%;
  .item {
    // margin-bottom: 15px;
    padding: 0 0 10px;
    &.pop {
      background: #fdfdfd;
      border: 1px solid #ececec;
      margin-bottom: 15px;
    }
    .setting {
      display: flex;
      align-items: center;
      padding: 5px 15px;

      &.popup {
        background: #f3f3f3;
      }

      .name {
        .textStyle(14px, 500, #696969);
        line-height: 20px;
        margin-right: 15px;
      }

      .slider {
        flex: 1;
      }
    }

    .factors {
      padding: 20px 15px 10px;
    }
  }
}
</style>
